                                                                                                                                                                                                                                                                                                                                                    <template>
    <div class="app-container" v-if="canList">
        <div class="filter-container">
                           <!-- <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item"
                          placeholder="标题"
                          v-model="listQuery.title">
                </el-input>-->
                            <!--<el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item"
                          placeholder="内容"
                          v-model="listQuery.content">
                </el-input>
                            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item"
                          placeholder="得票数"
                          v-model="listQuery.ticket">
                </el-input>
                            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item"
                          placeholder="视频"
                          v-model="listQuery.video">
                </el-input>
                -->
                           <!-- <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item"
                          placeholder="参与活动的ID"
                          v-model="listQuery.campaignId">
                </el-input>-->
                           <!-- <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item"
                          placeholder="发起人"
                          v-model="listQuery.userId">
                </el-input>-->


          <el-select @change='handleFilter'  clearable class="filter-item" style="width: 260px"
                                 v-model="listQuery.campaignId" placeholder="筛选活动下的参与人">
          <el-option v-for="item in  campaignList" :key="item.campaignId" :label="item.title" :value="item.campaignId"></el-option>
        </el-select>

          <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找
          </el-button>
          <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary"
                v-if="canSave"     icon="el-icon-edit">添加
          </el-button>
          <el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download"
                     @click="handleDownload">导出
          </el-button>
      </div>

      <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row
                style="width: 100%;min-height:1000px;">
          <el-table-column align="center" width="100" label="序号">
              <template slot-scope="scope">
                  <span>{{scope.row.id}}</span>
              </template>
          </el-table-column>
                          <el-table-column align="center" label="标题">
                  <template slot-scope="scope">
                      <span>{{scope.row.title}}</span>
                  </template>
              </el-table-column>
                          <el-table-column align="center" label="内容">
                  <template slot-scope="scope">
                      <span>{{scope.row.content}}</span>
                  </template>
              </el-table-column>
                          <el-table-column align="center" label="得票数">
                  <template slot-scope="scope">
                      <span>{{scope.row.ticket}}</span>
                  </template>
              </el-table-column>
                          <el-table-column align="center" label="视频">
                  <template slot-scope="scope">
                      <span>{{scope.row.video}}</span>
                  </template>
              </el-table-column>
                          <!--<el-table-column align="center" label="参与活动的ID">
                  <template slot-scope="scope">
                      <span>{{scope.row.campaignId}}</span>
                  </template>
              </el-table-column>-->
                          <el-table-column align="center" label="发起人">
                  <template slot-scope="scope">
                      <span>{{scope.row.name}}</span>
                  </template>
              </el-table-column>

          <el-table-column align="center" label="操作" width="360" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                  <!--<el-button type="primary"  v-if="canUpdate"  size="mini" @click="handleUpdate(scope.row)">编辑</el-button>-->
                  <el-button  v-if="canSave"  size="mini" type="danger"
                             @click="handleDelete(scope.row)">删除
                  </el-button>
              </template>
          </el-table-column>

      </el-table>

      <div class="pagination-container">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                         layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
      </div>

      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
          <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="70px"
                   style='width: 400px; margin-left:50px;'>
                                  <el-form-item label="标题" prop="name">
                      <el-input v-model="temp.title"></el-input>
                  </el-form-item>
                                  <el-form-item label="内容" prop="name">
                      <el-input v-model="temp.content"></el-input>
                  </el-form-item>
                                  <el-form-item label="得票数" prop="name">
                      <el-input v-model="temp.ticket"></el-input>
                  </el-form-item>
                                  <el-form-item label="视频" prop="name">
                      <el-input v-model="temp.video"></el-input>
                  </el-form-item>
                                  <el-form-item label="参与活动的ID" prop="name">
                      <el-input v-model="temp.campaignId"></el-input>
                  </el-form-item>
                                  <el-form-item label="发起人" prop="name">
                      <el-input v-model="temp.userId"></el-input>
                  </el-form-item>
                                                                                  <el-form-item label="图集" prop="imgs">
                      <el-upload
                                                          ref="imgsUpload"
                              action="http://upload.qiniup.com"
                              :auto-upload="true"
                              list-type="picture-card"
                              :on-preview="handlePictureCardPreview"
                              :before-upload="handleUpload"
                                                          :on-success="handleimgsUploadSuccess"
                              :data="qData"
                                                          :file-list="imgsList"
                                                          :on-remove="handleimgsRemove">
                          <i class="el-icon-plus"></i>
                      </el-upload>
                  </el-form-item>

                                  <el-dialog :visible.sync="dialogVisible" append-to-body>
                      <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="closeDialogForm">取消</el-button>
              <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">确认</el-button>
              <el-button v-else type="primary" @click="updateData">确认</el-button>
          </div>
      </el-dialog>
  </div>
</template>
<style type="stylus">
  .filter-container {
      padding-bottom: 20px;
  }
</style>

<script>
  import { save, update, remove } from '@/api/player'
  import { getCampaignList } from '@/api/campaign'
  import { getCampaignVoList } from '@/api/campaign'
  import waves from '@/directive/waves' // 水波纹指令

  import { getToken, domain } from '@/api/qiniu'
  import { listToStrs, strsToList } from '@/utils/imgUtil'

  import { mapGetters } from 'vuex'
  import { hasAuth } from '@/utils/auth'
  export default {
    name: 'test',
    directives: {
      waves
    },
    data() {
      return {
        tableKey: 0,
        list: null,
        total: null,
        campaignList: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
          sidx: 'id',
          order: 'desc',
          title: null,
          content: null,
          ticket: null,
          video: null,
          campaignId: null,
          userId: null
        },
        temp:
          {
            id: null, title: null, content: null, ticket: null, imgs: null, video: null, campaignId: null, userId: null, name: null },
        dialogFormVisible: false,
        dialogStatus:
          '',
        textMap:
          {
            update: '修改',
            create:
              '新增'
          },
        // 存在图片
        dialogImageUrl: '',
        dialogVisible:
              false,
        imgsList: [],
        rules:
          {
            title: [
              {
                required: false, message:
                              '必填字段', trigger:
                              'change'
              }
            ],
            content: [
              {
                required: false, message:
                              '必填字段', trigger:
                              'change'
              }
            ],
            ticket: [
              {
                required: false, message:
                              '必填字段', trigger:
                              'change'
              }
            ],
            imgs: [
              {
                required: false, message:
                              '必填字段', trigger:
                              'change'
              }
            ],
            video: [
              {
                required: false, message:
                              '必填字段', trigger:
                              'change'
              }
            ],
            campaignId: [
              {
                required: false, message:
                              '必填字段', trigger:
                              'change'
              }
            ],
            userId: [
              {
                required: false, message:
                              '必填字段', trigger:
                              'change'
              }
            ]
          },
        downloadLoading: false,
        qData:
          {
            token: '',
            key:
              ''
          }
      }
    },
    created() {
      this.getList()
      this.initCampaign()
    },
    computed: {
      ...mapGetters([
        'perms'
      ]),
      canSave() {
        return hasAuth(this.perms, 'player:save')
      },
      canDelete() {
        return hasAuth(this.perms, 'player:delete')
      },
      canUpdate() {
        return hasAuth(this.perms, 'player:update')
      },
      canList() {
        return hasAuth(this.perms, 'player:list')
      }
    },
    methods: {
      getList() {
        this.listLoading = true
        getCampaignVoList(this.listQuery).then(response => {
          this.list = response.data.list
          this.total = response.data.total
          this.listLoading = false
        })
      },
      initCampaign() {
        getCampaignList().then(res => {
          this.campaignList = res.data
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },
      handleModifyStatus(row, status) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        row.status = status
      },
      beforeFormShow(row) {
        this.resetTemp(row) // 更新数据
        // 存在图片
        this.initQiniu()

        // 存在图片字段转换图片地址显示
        this.initImgUrl()
      },
      afterFormShow(row) {

      },
      beforeFormCommit() {
        this.initImgName()// 图片转换
      },
      resetTemp(row) {
        this.temp = {}
        if (row) {
          this.temp = Object.assign({}, row) // copy obj
        }
      },
      handleCreate() {
        this.beforeFormShow()
        this.resetTemp()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.afterFormShow()
          this.$refs['dataForm'].clearValidate()
        })
      },
      handleDelete(row) {
        this.beforeFormShow(row)
        this.temp = Object.assign({}, row) // copy obj
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // })
          this.deleteData()
        })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      // 显示将图片名封装成可以展示状态集合
      initImgUrl() {
        this.imgsList = strsToList(this.temp.imgs, domain)
      },
      // 关闭显示窗口 重置图片地址 防止错乱
      resetImgUrl() {
        this.imgsList = []
      },
      // 上传或者更新的时候从图片链接中获取图片名字
      initImgName() {
        this.temp.imgs = listToStrs(this.imgsList)
      },
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.beforeFormCommit()
            save(this.temp).then(res => {
              this.temp = res.data
              this.list.unshift(this.temp)
              this.closeDialogForm()
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
            })
          }
        }
        )
      },
      deleteData() {
        const ids = [this.temp.id]
        remove(ids).then(res => {
          // 从当前队列中移除
          for (const v of this.list
          ) {
            if (v.id === this.temp.id) {
              const index = this.list.indexOf(v)
              this.list.splice(index, 1)
              break
            }
          }
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        })
      },
      handleUpdate(row) {
        this.beforeFormShow(row)
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      updateData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.beforeFormCommit()
            update(this.temp).then(() => {
              for (const v of this.list
              ) {
                if (v.id === this.temp.id) {
                  const index = this.list.indexOf(v)
                  this.list.splice(index, 1, this.temp)
                  break
                }
              }
              this.closeDialogForm()
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            })
          }
        }
        )
      },
      closeDialogForm() {
        // 存在图片
        this.resetImgUrl()
        this.dialogFormVisible = false
      },
      handleDownload() {
        this.downloadLoading = true
              import('@/vendor/Export2Excel').then(excel => {
                const tHeader = [
                  '序号',
                  '标题',
                  '内容',
                  '得票数',
                  '视频',
                  '参与活动的ID',
                  '发起人'
                ]
                const filterVal = ['id',
                  'title',
                  'content',
                  'ticket',
                  'video',
                  'campaignId',
                  'userId'
                ]
                const data = this.formatJson(filterVal, this.list)
                excel.export_json_to_excel({
                  header: tHeader,
                  data,
                  filename: 'table-list'
                })
                this.downloadLoading = false
              })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          return v[j]
        }
        ))
      },
      // 存在图片
      handleUpload(file) {
        this.qData.key = new Date().valueOf() + file.name
      },
      initQiniu() {
        // 获取七牛配置
        getToken().then(res => {
          this.qData.token = res.data
        })
          .catch(error => {
            console.log(error)
          })
      },
      handleimgsUploadSuccess(response, file, fileList) {
        this.imgsList.push({ name: file.response.key, url: domain + file.response.key })
      },
      handleimgsRemove(file, fileList) {
        for (var fn of this.imgsList) {
          if (fn.name === file.name) {
            this.imgsList.splice(this.imgsList.indexOf(fn), 1)
          }
        }
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      }
    }
  }
</script>
